<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>权限列表</title>
<link href="${ctx}/statics/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/statics/uimaker/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/statics/uimaker/icon.css">
<link rel="stylesheet" href="${ctx}/statics/css/providers1.css">
<link rel="stylesheet" href="${ctx}/statics/css/basic_info.css">
</head>
<body>
	<div class="container">
		<table id="dg" style="width: 100%; height: 529px"
			data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:true,
                pagination:true,
                fitColumns:true,
                striped:false,
                checkOnSelect:true,
                selectOnCheck:true,
                collapsible:true,
                toolbar:'#tb',
                url:'${ctx}/store/page',
				method:'post',
                pageSize:10">
			<thead>
				<tr>
					<th field="id" width="100" hidden="hidden">ID</th>
					<th field="name" width="100">用户名</th>
					<th field="linkName" width="100">联系人</th>
					<th field="mobile" width="100">手机号码</th>
					<th field="regionId" width="100">区域号</th>
					<th field="address" width="100">地址</th>
					<th field="username" width="100">用户名</th>
					<th field="password" width="100">密码</th>
					<th field="locked" width="100" formatter="booleanFormatter">是否锁定</th>
					<th field="deleted" width="100" formatter="booleanFormatter">是否注销</th>
					<th field="jw" width="100">经纬度</th>
					<th field="description" width="100">描述</th>
					<th field="storeCode" width="100">门店号</th>
				</tr>
			</thead>
		</table>
		<div id="tb" style="padding: 0 30px;">
			<div class="conditions">
				<span class="con-span">用户名 </span><input id="username"
					class="easyui-textbox" type="text" name="username"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <span
					class="con-span">昵称 </span><input id="name" class="easyui-textbox"
					type="text" name="name"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <span
					class="con-span">手机号码</span><input id="mobile"
					class="easyui-textbox" type="text" name="mobile"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <a
					href="javascript:doSearch();" class="easyui-linkbutton"
					iconCls="icon-search" data-options="selected:true">查询</a> <a
					href="javascript:resetSearch()" class="easyui-linkbutton"
					iconCls="icon-reload">重置</a> <a href="#"
					class="easyui-linkbutton more" iconCls="icon-more">更多</a>
			</div>
			<div class="conditions hide">
				<span class="con-span">是否锁定</span> <select id="locked"
					class="easyui-combobox" name="locked"
					style="width: 166px; height: 30px; line-height: 30px;">
					<option disabled="disabled" value="">请选择</option>
					<option disabled="disabled" value="1">是</option>
					<option disabled="disabled" value="0">否</option>
				</select><span class="con-span">是否注销 </span><select id="deleted"
					class="easyui-combobox" name="deleted"
					style="width: 166px; height: 30px; line-height: 30px;">
					<option disabled="disabled" value="">请选择</option>
					<option disabled="disabled" value="1">是</option>
					<option disabled="disabled" value="0">否</option>
				</select>
			</div>
			<div class="opt-buttons">
				<a href="#" class="easyui-linkbutton add-btn"
					data-options="selected:true">新增</a> <a href="#"
					class="easyui-linkbutton edit-btn" data-options="selected:true">编辑</a>
				<a href="#" class="easyui-linkbutton del-btn">删除</a>
			</div>

		</div>
	</div>
	<div id="w" class="easyui-dialog" title="员工信息"
		data-options="modal:true,closed:true,buttons:'#dlg-buttons'"
		style="width: 700px; height: 400px; padding: 10px;">
		<div class="container">
			<div class="content">
				<div class="easyui-tabs1" style="width: 100%;">
					<div title="基本信息" data-options="closable:false" class="basic-info">
						<form id="form0" method="post">
							<input type="hidden" name="id" />
							<table class="kv-table">
								<tbody>
									<tr>
										<td class="kv-label">用户名</td>
										<td class="kv-content"><input id="username"
											name="username" class="easyui-textbox" type="text"
											required="true"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
										<td class="kv-label">昵称</td>
										<td class="kv-content"><input id="name" name="name"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr id="pwdtr">
										<td class="kv-label">密码</td>
										<td class="kv-content"><input id="password"
											name="password" class="easyui-textbox" type="text"
											required="true"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">手机号码</td>
										<td class="kv-content" colspan="3"><select id="mobile"
											name="mobile" class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;">
												<option value="1">是</option>
												<option value="0">否</option>
										</select></td>
									</tr>
									<tr id="loctr">
										<td class="kv-label">是否锁定</td>
										<td class="kv-content" colspan="3"><select name="locked"
											class="easyui-combobox" autofocus="autofocus"
											data-options="editable:false"
											style="width: 166px; height: 30px; line-height: 30px;">
												<option value="1">是</option>
												<option value="0">否</option>
										</select></td>
									</tr>
									<tr id="deltr">
										<td class="kv-label">是否注销</td>
										<td class="kv-content" colspan="3"><input name="deleted"
											class="easyui-combobox" autofocus="autofocus"
											data-options="editable:false"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:doAdd()" style="width: 80px"
			data-options="selected:true">提交</a> <a class="easyui-linkbutton"
			href="javascript:void(0)"
			onclick="javascript:$('#w').dialog('close');" style="width: 80px">取消</a>
	</div>
	<script type="text/javascript" src="${ctx}/statics/js/jquery.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript">
		$(function() {
			$('#dg').datagrid();

			$('.add-btn').on('click', function() {
				$('#w').form('clear');
				$('#w').dialog('open').dialog('setTitle', '员工新增');
				$('#pwdtr').removeAttr("hidden");
				$('#loctr').attr("hidden","hidden");
				$('#deltr').attr("hidden","hidden");
			});

			$('.edit-btn').on('click', function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$("#w").dialog('open').dialog('setTitle', '员工修改');
					$('#form0').form('load', row);
					$('#pwdtr').attr("hidden","hidden");
					$('#loctr').removeAttr("hidden");
					$('#loctr').find('[name="locked"]').change();
					$('#deltr').removeAttr("hidden");
					$('#deltr').find('[name="deleted"]').change();
				} else {
					$.messager.alert('提示', '请选择一条数据', 'info');
				}
			});

			$('.del-btn').on('click', function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$.messager.confirm('提示', '确定删除吗？', function(r) {
						if (r) {
							$.post('${ctx}/user/delete', {
								"id" : row.id
							}, function(data) {
								if (data.result == true) {
									doSearch();
									$.messager.show({
										title : '提示',
										msg : data.msg,
										timeout : 5000,
										showType : 'slide'
									});
								} else {
									$.messager.alert('错误', data.msg, 'error');
								}
							}, 'json');
						}
					});
				} else {
					$.messager.alert('提示', '请选择一条数据', 'info');
				}
			});

			<c:if test="${not empty successMessage}">
			$.messager.show({
				title : '提示',
				msg : '${successMessage}',
				timeout : 5000,
				showType : 'slide'
			});
			</c:if>
			<c:if test="${not empty errorMessage}">
			$.messager.alert('错误', '${errorMessage}', 'error');
			</c:if>
		});

		var booleanFormatter = function(val, rows) {
			if (val == 1) {
				return "是";
			} else {
				return "否";
			}
		}
		var doAdd = function() {
			// 1、拿表单里的所有待提交数据
			// 2、表单校验（略）
			// 3、ajax提交数据到服务器端

			$('#form0').form('submit', {
				url : '${ctx}/user/save',
				onSubmit : function() {
					return $(this).form('validate');
				},
				success : function(data) {
					$('#form0').form('clear');
					var data = eval('(' + data + ')');
					if (data.result == true) {
						$('#w').dialog('close');
						doSearch();
						$.messager.show({
							title : '提示',
							msg : data.msg,
							timeout : 5000,
							showType : 'slide'
						});
					} else {
						$.messager.alert('错误', data.msg, 'error');
					}
				}
			});
		}

		var doSearch = function() {
			$('#dg').datagrid('load', {
				"username" : $('#name').textbox('getValue'),
				"name" : $('#name').textbox('getValue'),
				"mobile" : $('#mobile').textbox('getValue'),
				"locked" : $('locked').combobox('getValue'),
				"deleted" : $('deleted').combobox('getValue')
			});
		}

		var resetSearch = function() {
			$('#username').textbox('setValue', '');
			$('#name').textbox('setValue', '');
			$('#mobile').textbox('setValue', '');
			$('locked').combobox('select', '');
			$('locked').combobox('select', '')
		}

		$(".more").click(function() {
			$(this).closest(".conditions").siblings().toggleClass("hide");
		});
	</script>
</body>
</html>